<template>

  <el-carousel indicator-position="none" height="auto" autoplay>
    <el-carousel-item v-for="item in 4" :key="item" style="background-image: url('src/assets/index/cove-1.jpg');height: 700px">
      <div class="cover-item " style="background-image:linear-gradient(to right bottom, rgba(11, 15, 18, 0.3),rgba(11, 15, 18, 0.3)),url('src/assets/index/cove-1.jpg')">

        <h2 class="cover-title cover_title-1">街道农村</h2>
        <p class="cover-text cover_text-1"><span>党建</span>引领融合网格、综治、民生、政务、养老环保于一体，全面覆盖农村党建全业务，构建共建共治共享的治理模式</p>
      </div>
 </el-carousel-item>
  </el-carousel>

<!--  <section class="cover_section">-->
<!--    <div class="cover-all">-->
<!--      <div class="cover-item cover-1">-->
<!--        <h2 class="cover-title cover_title-1">街道农村</h2>-->
<!--        <p class="cover-text cover_text-1"><span>党建</span>引领融合网格、综治、民生、政务、养老环保于一体，全面覆盖农村党建全业务，构建共建共治共享的治理模式</p>-->
<!--      </div>-->
<!--      &lt;!&ndash;<div class="learn-more">了解更多</div>&ndash;&gt;-->
<!--    </div>-->

<!--    &lt;!&ndash;            轮播图按钮部分&ndash;&gt;-->
<!--    <div class="cover-button cover_button-1">-->
<!--      <-->
<!--    </div>-->
<!--    <div class="cover-button cover_button-2">-->
<!--      >-->
<!--    </div>-->
<!--  </section>-->
</template>

<script setup>

</script>

<style scoped>
/*轮播图模块*/
.cover_section{
  width:100%;
  height:68rem;
  position: relative;
  /*background-color: yellow;*/
}
.cover-all{
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:100%;
  /*background-color: green;*/
}
.cover-item{
  width:100%;
  height:100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;

}

.cover-1{

}
.cover-title{
  font-size: 5rem;
  position: absolute;
  color:white;
  font-family: 楷体;
}
.cover_title-1{
  left:45%;
  top:25%;
}
.cover-text{
  font-size: 3rem;
  color:white;
  font-family: 楷体;
  position: absolute;
  width:45rem;
  height:15rem;
  letter-spacing: 5px;
}
.cover_text-1{
  left:38%;
  top:38%;
}
.cover_text-1 span{
  color:rgba(156, 0, 0, 1);
  font-weight: bolder;
  font-size: 3.5rem;
}

.cover-button{
  width:6rem;
  height:6rem;
  background-color: rgba(250,250,250,0.1);
  color: rgba(250,250,250,0.4);
  position: absolute;
  font-size: 3rem;
  border-radius: 50%;
  text-align: center;
  line-height: 6rem;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  transition: all 0.2s;
  cursor: pointer;
}
.cover-button:hover{
  background-color: rgba(250,250,250,0.3);
  color: rgba(250,250,250,0.6);
}
.cover_button-1{
  left:5%;
  top:47%;
}
.cover_button-2{
  right:5%;
  top:47%;
}

/*cover-section.css第16行代码里面的*/
/*.cover-item{*/
/*  background-image:linear-gradient(to right bottom, rgba(11, 15, 18, 0.35),rgba(11, 15, 18, 0.35)), url("src/assets/index/cove-8.jpg");*/
/*}*/
/*!*cover-section.css第26行里面的*!*/
/*.cover-1{*/
/*  background-image:linear-gradient(to right bottom, rgba(11, 15, 18, 0.35),rgba(11, 15, 18, 0.35)), url("src/assets/index/cove-1.jpg");*/
/*}*/
</style>
